<template>
  <q-page class="row justify-center">
    <div class="website-page" style="width: 720px; min-width: 80vw;">
      <div id="lucky-sheet" class="lucky-sheet-container"></div>
    </div>
    <import-export></import-export>
  </q-page>
</template>

<script>
/* 名录库管理 */
// eslint-disable-next-line
import { defineComponent, nextTick, onBeforeUnmount, onMounted } from 'vue'
import options from './options'
import ImportExport from '../../../components/importExport'
export default defineComponent({
  name: 'Index',
  components: { ImportExport },
  setup () {
    onMounted(() => {
      luckysheet.create(options)
      nextTick(() => {
        console.log(link())
      })
    })
    onBeforeUnmount(() => {
      console.log('destroy')
      luckysheet.destroy() // 销毁表格
    })
    const isJson = function isJSON (str) {
      if ((str.indexOf('[') !== -1) || (str.indexOf('{') !== -1)) { // 含有这些符号,合格json字符串
        try {
          const obj = JSON.parse(str)
          if (typeof obj === 'object' && obj) { // 是否是对象
            return obj
          } else {
            return ''
          }
        } catch (e) {
          console.log('error：' + e)
          return false
        }
      } else {
        return ''
      }
    }
    const link = function () { // 链接websocket
      const url = 'ws://192.168.50.27:8000/auth/43207685/'
      const ws = new WebSocket(url)
      console.log('ws', ws)
      ws.onopen = function () {
        console.log('open')
      }
      ws.onmessage = function (e) {
        const a = isJson(e.data)
        console.log(a)
      }
      ws.onclose = function (e) {
        console.log('closed')
      }
      ws.onerror = function (e) {
        console.log('error')
      }
    }

    return {
    }
  }
})
</script>
<style scoped>
.lucky-sheet-container {
  width: 100%;
  height: 100%;
}
</style>
